import Link from 'next/link';
import { certifications } from './data';

export const metadata = {
  title: '专业资质证书 | 余莉莎',
  description: '余莉莎的专业资质证书展示，包括信息安全、财务会计、教育等多个领域的专业认证',
};

export default function CertificationsPage() {
  // 按类别对证书进行分组
  const categories: string[] = Array.from(new Set(certifications.map(cert => cert.category)));
  
  // 按类别分组证书
  const certsByCategory = categories.map(category => {
    const categoryCerts = certifications.filter(cert => cert.category === category);
    return {
      category,
      certifications: categoryCerts,
    };
  });

  return (
    <div className="min-h-screen py-16">
      <div className="container mx-auto px-4">
        <h1 className="text-4xl font-bold text-primary-600 mb-2 text-center">专业资质证书</h1>
        <p className="text-xl text-gray-600 mb-12 text-center max-w-3xl mx-auto">
          以下是我在各个专业领域获得的资质证书和专业认证，展示了我的专业背景和能力
        </p>

        {/* 特色证书展示 */}
        <section className="mb-16">
          <h2 className="text-2xl font-semibold text-gray-800 mb-6 border-l-4 border-primary-500 pl-3">
            主要资质证书
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {certifications
              .filter(cert => cert.featured)
              .map(cert => (
                <div key={cert.id} className="group perspective">
                  <div className="relative h-80 w-full rounded-lg shadow-md overflow-hidden transform-gpu transition-all duration-500 transform-style preserve-3d group-hover:rotate-y-180">
                    {/* 正面：证书图片 */}
                    <div className="absolute inset-0 backface-hidden">
                      <img
                        src={cert.image || '/images/Photo01.jpg'}
                        alt={cert.title}
                        className="w-full h-full object-cover"
                      />
                      <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4">
                        <h3 className="text-white text-xl font-semibold">{cert.title}</h3>
                        <p className="text-white/80 text-sm">{cert.organization}</p>
                      </div>
                    </div>
                    
                    {/* 背面：证书详情 */}
                    <div className="absolute inset-0 bg-white p-6 rounded-lg flex flex-col backface-hidden rotate-y-180">
                      <h3 className="text-xl font-semibold text-primary-600 mb-2">{cert.title}</h3>
                      <div className="mb-2 text-sm text-gray-600">
                        <span className="font-semibold">颁发机构:</span> {cert.organization}
                      </div>
                      <div className="mb-2 text-sm text-gray-600">
                        <span className="font-semibold">获得时间:</span> {cert.issueDate}
                        {cert.expiryDate && ` (有效期至: ${cert.expiryDate})`}
                      </div>
                      <div className="mb-2 text-sm text-gray-600">
                        <span className="font-semibold">类别:</span> {cert.category}
                      </div>
                      <p className="text-gray-700 flex-grow">{cert.description}</p>
                    </div>
                  </div>
                </div>
              ))}
          </div>
        </section>

        {/* 按类别分组的所有证书 */}
        {certsByCategory.map(({ category, certifications }) => (
          <section key={category} className="mb-16">
            <h2 className="text-2xl font-semibold text-gray-800 mb-6 border-l-4 border-primary-500 pl-3">
              {category}
            </h2>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
              {certifications.map(cert => (
                <div key={cert.id} className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
                  <div className="h-48 bg-gray-100 relative">
                    <img
                      src={cert.image || '/images/Photo01.jpg'}
                      alt={cert.title}
                      className="w-full h-full object-cover"
                    />
                    {cert.featured && (
                      <div className="absolute top-0 right-0 bg-primary-500 text-white px-2 py-1 text-xs">
                        重要证书
                      </div>
                    )}
                  </div>
                  <div className="p-4">
                    <h3 className="text-lg font-semibold text-gray-800 mb-1">{cert.title}</h3>
                    <p className="text-gray-600 text-sm mb-2">{cert.organization}</p>
                    <p className="text-gray-500 text-xs mb-2">
                      {cert.issueDate}
                      {cert.expiryDate && ` - ${cert.expiryDate}`}
                    </p>
                    <p className="text-gray-700 text-sm line-clamp-2">{cert.description}</p>
                  </div>
                </div>
              ))}
            </div>
          </section>
        ))}
        
        {/* CTA部分 */}
        <div className="text-center mt-10">
          <p className="text-gray-600 mb-4">想了解我如何将这些专业知识应用于实际项目？</p>
          <div className="flex flex-wrap justify-center gap-4">
            <Link href="/projects" className="btn-primary">
              查看项目案例
            </Link>
            <Link href="/#contact" className="btn-secondary">
              联系我
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
} 